<template>
	<view class="columnbox wdh-100 content">
		<u-navbar bg-color="transparent" titleStyle='color:#fff' title="洗车站详情" @rightClick="rightClick"
			:autoBack="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
			</view>
		</u-navbar>
		<view class="columnbox wdh-100" v-if="stationinfo!=''">
			<swiper class="swiper-box">
				<swiper-item v-for="(item,index) in stationinfo.listUrl" :key='index'>
					<view class="swiper-o rowbox">
						<image mode="aspectFill" :src="item.url">
						</image>
						<view class="img-mask"></view>
					</view>
				</swiper-item>
			</swiper>
			<view class="columnbox wdh-100 s-box">
				<view class="rowbox wdh-100 jus als">
					<image class="s-img" :src="stationinfo.listUrl[0].url" mode="aspectFill"></image>
					<view class=" columnbox s-info als">
						<view class="store-name">{{stationinfo.name}}</view>
						<view class="rowbox s-type">
							<view class="rowbox s-qj" v-if="stationinfo.stationType==0">旗舰站</view>
							<view class="rowbox s-jm" v-else-if="stationinfo.stationType==1">标准站</view>
							<view class="rowbox s-zz" v-else-if="stationinfo.stationType==2">自助站</view>
							<view class="rowbox s-zd" v-else-if="stationinfo.stationType==3">自动站</view>
						</view>
						<view class="s-jf">可获得1积分</view>
						<view class="rowbox wdh-100 spb">
							<view class="rowbox wdh-100 spb">
								<view class="s-addr textovflow">{{stationinfo.address}}</view>
								<view class="distance">{{stationinfo.distance/1000}}KM</view>
							</view>
							<!-- <view @click="showMap" class="rowbox s-location-box">
								<image class="s-location" src="/static/img/s-location.png" mode="widthFix"></image>
								导航
							</view> -->
						</view>
					</view>
					<!-- <view class="rowbox wdh-100 spb" style="margin: 20rpx 0;">
						<view class="rowbox">
							<view class="s-address">{{stationinfo.address}}</view>
							<view class="s-address" style="margin-left: 20rpx;">
								<image src="/static/img/weizhi.png" mode="widthFix" style="width: 20rpx;height: 20rpx;">
								</image>
								{{stationinfo.distance>1000?stationinfo.distance/1000+'KM':(stationinfo.distance+'M')}}
							</view>
						</view>
						<image @click="showMap" src="/static/img/location.svg" mode="widthFix" class="location-icon">
						</image>
					</view> -->
				</view>
				<view class="rowbox t-box spb wdh-100">
					<view class="rowbox jus">
						<view class="rowbox s-zd-status">
							<view class="s-zd-status-title rowbox">自动</view>
							<view class="s-zd-status-detail">闲{{stationinfo.doorIdle[0]}}
							</view>
						</view>
						<view class="rowbox s-zd-status zz-status">
							<view class="s-zd-status-title rowbox" style="background: #00DCA9;">自助</view>
							<view class="s-zd-status-detail" style="color: #00DCA9;">闲{{stationinfo.doorIdle[1]}}
							</view>
						</view>
						<view class="rowbox s-zd-status" style="background: #fdf6e3;">
							<view class="s-zd-status-title rowbox" style="background: #E99D42;">人工</view>
							<view class="s-zd-status-detail" style="color:#EAB300;">闲{{stationinfo.doorIdle[2]}}
							</view>
						</view>
					</view>
					<view class="rowbox location-box" @click.stop="showMap">
						<image src="/static/img/s-location.png"></image>
						导航
					</view>
				</view>
			</view>
			<view class="wdh-100 columnbox b-box">
				<view class="info-content columnbox wdh-100">
					<view class="rowbox wdh-100 jus" style="background: #fff;">
						<view class="one-x-type columnbox" @click="changeDoorType(item.id)"
							v-for="(item,index) in doorType" :key='index'
							:class="{'one-x-type-s':item.id==curDoorType}">
							<view :class="{'one-x-type-title':item.id==curDoorType}">{{item.title}}</view>
							<view v-if="item.id==curDoorType" class="one-x-type-line"></view>
							<view v-if="item.id==1" class="s-tag rowbox " :class="{'s-tag-s':item.id==curDoorType}">24H
							</view>
							<view v-if="item.id==0" class="s-tag rowbox " :class="{'s-tag-s':item.id==curDoorType}">24H
							</view>
							<view v-if="item.id==2" class="s-tag rowbox " :class="{'s-tag-s':item.id==curDoorType}">白班
							</view>
						</view>
					</view>
					<view class="columnbox wdh-100" style="padding: 0 24rpx;">
						<view class="rowbox jus type-title">洗车工位
							<text v-if="curDoorType==1">({{zizhu.length}})</text>
							<text v-else-if="curDoorType==0">({{zidong.length}})</text>
						</view>
						<!-- 自助洗车 -->
						<view v-if="curDoorType==1" class="room-list wdh-100" @click="setType(2)"
							:class="{'sel-type':curtype==2}">
							<view @click.stop="doorId=item.doorId" class="rowbox one-room jus"
								:class="{'sel-type':item.doorId==doorId}" v-for="(item,index) in zizhu" :key='index'>
								<view class="zz-index rowbox">{{index+1}}</view>
								<view class="columnbox als" style="margin-left: 10rpx;">
									<view class="rowbox spb">
										<view class="zz-name">自助洗车间
										</view>
										<view v-if="item.opesType==0" class="rowbox status-box">空闲</view>
										<view v-else-if="item.opesType==2" class="rowbox status-box"
											style="background: #72778A;">维修
										</view>
										<view v-else-if="item.opesType==1" class="rowbox status-box"
											style="background: #C34438;">
											占用
										</view>
									</view>
									<view v-if="item.opesType==0" class="zz-desc">设备空闲中可使用</view>
									<view v-else-if="item.opesType==1" class="zz-desc">设备正在维修中</view>
									<view style="color: #C34438;" v-else-if="item.opesType==2" class="zz-desc">设备正在使用中
									</view>
								</view>
							</view>
						</view>
						<!-- 自动洗车 -->
						<view v-else-if="curDoorType==0" class="columnbox wdh-100" @click="setType(1)"
							:class="{'sel-type':curtype==1}">
							<view @click.stop="doorId=item.doorId" class="columnbox one-room-zz"
								:class="{'sel-type':item.doorId==doorId}" v-for="(item,index) in zidong" :key='index'>
								<view class="rowbox wdh-100 spb">
									<view class="rowbox">
										<view class="zz-index rowbox">{{index+1}}</view>
										<view class="zz-name" style="margin-left: 10rpx;">自动洗车间
										</view>
										<view v-if="item.opesType==0" class="rowbox status-box">空闲</view>
										<view v-else-if="item.opesType==2" class="rowbox status-box"
											style="background: #72778A;">维修
										</view>
										<view v-else-if="item.opesType==1" class="rowbox status-box"
											style="background: #C34438;">
											占用
										</view>
									</view>
									<view class="rowbox firingTypes">
										<view class="rowbox firingTypes-o"
											:class="{'firingTypes-s firingTypes-o':items.value==firingTypes}"
											v-for="(items,indexs) in firingTypesOptions" :key='indexs'
											@click="firingTypes=items.value">
											{{items.name}}
										</view>
									</view>
								</view>
								<view class="firingTypes-d" v-if="item.opesType==0">
									{{stationinfo.firingTypes[firingTypes].centent}}
								</view>
								<view class="firingTypes-d" style="color: #72778A;" v-else-if="item.opesType==2">
									设备正在维修中
								</view>
								<view class="firingTypes-d" style="color: #C34438;" v-else-if="item.opesType==1">
									设备正在使用中
								</view>
							</view>
						</view>
						<!-- 人工洗车 -->
						<view v-else-if="curDoorType==2" class="columnbox wdh-100" @click="setType(2)"
							:class="{'sel-type':curtype==2}">
							<view @click.stop="doorId=item.doorId" class="columnbox one-room-zz"
								:class="{'sel-type':item.doorId==doorId}" v-for="(item,index) in rengong" :key='index'>
								<view class="rowbox wdh-100 spb">
									<view class="rowbox">
										<view class="zz-index rowbox">{{index+1}}</view>
										<view class="zz-name" style="margin-left: 10rpx;">{{item.doorName}}
										</view>
										<view v-if="item.opesType==0" class="rowbox status-box"
											style="width: 100rpx;background: #EAB300;">
											可预约</view>
									</view>
									<view class="rowbox firingTypes" style="border: #EAB300 solid 1px;">
										<view class="rowbox firingTypes-o reservation-o"
											:class="{'firingTypes-s reservation-s':items.value==reservation}"
											v-for="(items,indexs) in reservationOptions" :key='indexs'
											@click="reservation=items.value">
											{{items.name}}
										</view>
									</view>
								</view>
								<view class="firingTypes-d" v-if="item.opesType==0">
									{{stationinfo.reservationServices[reservation].content}}
								</view>
							</view>
						</view>
						<!-- 选择车型 -->
						<view class="selectCarType display  width-100 displayColumn M-T36" style="width: 690rpx;">
							<!-- 标题 -->
							<view class="selectCarType_title display  width-100">
								<span class="fontSize font_comm M-L24">选择车型</span>
							</view>
							<view class="selectCarType_two display  width-100" style="padding-left: 8rpx;padding-right: 8rpx;">
								<view @click="cangeCarType(indexs)" :class="{one:selectCarType!=indexs,one1:selectCarType==indexs, display:true,  all_item:true,  'M-T16':true, 'M-L20':true}" v-for="(item,indexs) in carArr" :key="indexs" style="margin-left: 20rpx;" >
									<span class="fontSize font_comm">{{item.name}}</span>
								</view>
							</view>
						</view>
						<view class="rowbox jus type-title">洗车价格
						</view>
						<template v-if="curDoorType==1">
							<view class="rowbox wdh-100 jus v-box">
								<image src="/static/img/putong.png" mode="widthFix" class="v-img"></image>
								{{stationinfo.zzFees[0].directions}}
							</view>
							<view class="rowbox wdh-100 jus v-box">
								<image src="/static/img/vip.png" mode="widthFix" class="v-img"></image>
								{{stationinfo.zzFees[1].directions}}
							</view>
							<view class="rowbox wdh-100 jus v-box" v-if="stationinfo.zzFees.length>2">
								<image src="/static/img/svip.png" mode="widthFix" class="v-img"></image>
								{{stationinfo.zzFees[2].directions}}
							</view>
							<view class="pay-box wdh-100 rowbox spb"
								style="border-top: #F6F6F6 solid 1px;padding-top: 20rpx;">
								<view>支付方式</view>
								<view style="color: #000;">30.00元/次或消耗洗车券一张</view>
							</view>
							<view class="pay-box wdh-100 rowbox spb">
								<view>停车费</view>
								<view style="color: #000;">免费</view>
							</view>
						</template>
						<template v-else-if="curDoorType==0">
							<view class="rowbox wdh-100 jus v-box">
								<image src="/static/img/putong.png" mode="widthFix" class="v-img"></image>
								{{stationinfo.zdFees[0].directions}}
							</view>
							<view class="rowbox wdh-100 jus v-box">
								<image src="/static/img/vip.png" mode="widthFix" class="v-img"></image>
								{{stationinfo.zdFees[1].directions}}
							</view>
							<view class="rowbox wdh-100 jus v-box" v-if="stationinfo.zdFees.length>2">
								<image src="/static/img/svip.png" mode="widthFix" class="v-img"></image>
								{{stationinfo.zdFees[2].directions}}
							</view>
							<view class="pay-box wdh-100 rowbox spb"
								style="border-top: #F6F6F6 solid 1px;padding-top: 20rpx;">
								<view>支付方式</view>
								<view style="color: #000;">30.00元/次或消耗洗车券一张</view>
							</view>
							<view class="pay-box wdh-100 rowbox spb">
								<view>停车费</view>
								<view style="color: #000;">免费</view>
							</view>
						</template>
						<template v-else-if="curDoorType==2">
							<view class="rowbox wdh-100 jus v-box">
								<image src="/static/img/putong.png" mode="widthFix" class="v-img"></image>
								{{stationinfo.zdFees[0].directions}}
							</view>
							<view class="rowbox wdh-100 jus v-box">
								<image src="/static/img/vip.png" mode="widthFix" class="v-img"></image>
								{{stationinfo.zdFees[1].directions}}
							</view>
							<view class="rowbox wdh-100 jus v-box" v-if="stationinfo.zdFees.length>2">
								<image src="/static/img/svip.png" mode="widthFix" class="v-img"></image>
								{{stationinfo.zdFees[2].directions}}
							</view>
							<view class="pay-box wdh-100 rowbox spb"
								style="border-top: #F6F6F6 solid 1px;padding-top: 20rpx;">
								<view>营业时间</view>
								<view style="color: #000;">{{getBusinessHours(stationinfo.businessHours)}}</view>
							</view>
							<view class="pay-box wdh-100 rowbox spb"
								style="border-top: #F6F6F6 solid 1px;padding-top: 20rpx;">
								<view>支付方式</view>
								<view style="color: #000;">30.00元/次或消耗洗车券一张</view>
							</view>
							<view class="pay-box wdh-100 rowbox spb">
								<view>停车费</view>
								<view style="color: #000;">免费</view>
							</view>
						</template>
					</view>
				</view>

				<view class="columnbox wdh-100 info-box">

					<view class="rowbox wdh-100 spb store-info" @click="callPhone(stationinfo.phone)">
						<view class="rowbox">
							<image src="/static/img/zzdh.png" mode="widthFix" class="store-icon"></image>
							站长电话
						</view>
						<view class="def-col">{{stationinfo.phone}}</view>
					</view>
					<view class="rowbox wdh-100 spb store-info" @click="callPhone(stationinfo.hotline)">
						<view class="rowbox">
							<image src="/static/img/zzdh.png" mode="widthFix" class="store-icon"></image>
							客服电话
						</view>
						<view class="def-col">{{stationinfo.hotline}}</view>
					</view>
					<view class="rowbox wdh-100 spb store-info" style="position: relative;"
						@click="callPhone(stationinfo.hotline)">
						<button open-type="contact"
							style="position: absolute;width: 100%;height: 100%;z-index: 2;opacity: 0;"></button>
						<view class="rowbox">
							<image src="/static/img/kefu.png" mode="widthFix" class="store-icon"></image>
							联系在线客服
						</view>
						<u-icon name="arrow-right" color="#72778A" size="24rpx"></u-icon>
					</view>
				</view>
				<view class="wdh-100" style="height: 200rpx;"></view>
				<view class="rowbox bottom-box">
					<!-- 余额 普洗 -->
					<view class="rowbox account-box" @click="toRecharge" >
						¥ {{isLogin?(walletinfo.cash||0):0}} 充值余额
					</view>
					<!-- 精洗 -->
					<!-- <view class="rowbox account-box" @click="tosavecar" v-if="reservation==1">
						预约洗车
					</view> -->
					<!-- 测试 -->
					<!-- <view class="rowbox account-box" @click="tosavecar" >
						预约洗车
					</view> -->
					<!-- <view class="rowbox pay-btn">请选择洗车类型</view> -->
					<view @click="confirmOrder" class="rowbox pay-btn confirm-btn" v-if="reservation!=1">开始洗车</view>
					<view  class="rowbox pay-btn confirm-btn" @click="tosavecar" v-else>预约洗车</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curtype: '',
				id: '',
				stationinfo: '',
				doorId: '',
				walletinfo: '',
				submitflag: false,
				couponsId: '',
				feeSettingszd: '',
				feeSettingszz: '',
				feeSettingsrg: '',
				cityid: '',
				lng: 114.544842,
				lat: 38.024091,
				zizhu: [], //自助
				zidong: [], //自动
				rengong: [], //人工
				selectCarType:0,//汽车类型
				carArr:[
					{
						name:'轿车',
						value:0
					},
					{
						name:'SUV',
						value:1
					},
					{
						name:'货车',
						value:2
					}
				],
				doorType: [{
						id: 1,
						title: '自助洗车'
					},
					{
						id: 0,
						title: '自动洗车'
					},
					{
						id: 2,
						title: '人工洗车'
					}
				],
				curDoorType: 1,
				firingTypes: 0,
				firingTypesOptions: [{
						name: '全自动',
						value: 0
					},
					{
						name: '半自动',
						value: 1
					}
				],
				reservation: 0,//普洗  1精洗
				reservationOptions: [{
						name: '普洗',
						value: 0
					},
					{
						name: '精洗',
						value: 1
					}
				],
				firstshow: true
			};
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
			// 判断是否为精洗车
			reservation1(){
				return this.reservation
			}
		},
		onLoad(options) {
			this.id = options.id
			if (options.couponsId) {
				this.couponsId = options.couponsId
			}
			this.city = uni.getStorageSync('city')
			this.cityid = uni.getStorageSync('cityId')
			// #ifdef H5
			this.getDetail()
			// #endif
			uni.getLocation({
				success: (res) => {
					this.lat = res.latitude
					this.lng = res.longitude
					this.getDetail()
				},
				fail: () => {
					this.getDetail()
				}
			})
		},
		onShow() {
			this.$nextTick(() => {
				if (this.isLogin) {
					this.getWallet()
				}
			})
		},
		methods: {
			// 选择车型
			cangeCarType(index){
				console.log(index)
				this.selectCarType = index;
			},
			// 预约洗车
			tosavecar(){
				// artificialCarType : 0 轿车，1：suv，2：房车 默认为0
				//memberType: "0"：普通会员，“1”：vip，“2”：svip  在本地读取
				// 默认精洗 1
				let memberType = uni.getStorageSync('userInfo').user.memberType;
				let artificialCarType = this.carArr[this.selectCarType].value;//先选默认的值 车型
				let artificialServiceType  = 1;//精细 服务类型
				let all = memberType + artificialCarType + artificialServiceType;
				// 筛选
				let money = this.stationinfo.rgFees[all]
				let arr = {}
				// 人工工位名称
				
				for(let i=0;i<this.rengong.length;i++){
					if(this.rengong[i].doorId == this.doorId){
						arr = this.rengong[i];
						break;
					}
				}
				let json = {
					washOrderAmount:money.price,//订单金额
					artificialCarType:this.carArr[this.selectCarType].value,//车型
					artificialServiceType:0,//服务类型
					stationId:this.stationinfo.stationId,
					memberType:memberType,//会员类型
					userId:uni.getStorageSync('userInfo').user.userId,
					doorId:this.doorId,
					doorName:arr.doorName,
				}
				console.log(json)
				json = JSON.stringify(json)
				this.$tab.navigateTo(`/packageB/appiotCar/appiotCar?json=${json}`)
			},
			// 选择类型
			changeDoorType(type) {
				console.log(type)
				this.firstshow = false
				this.curDoorType = type
				this.reservation = 0;
				this.getDoorType()
			},
			getDoorType() {
				let data = {
					stationId:this.stationinfo.stationId
				}
				if (this.curDoorType == 0) {
					this.$req.get(`/xcx/stationDoor/list/doorType/${0}`,data).then(res => {
						console.log(res)
						this.zidong = res.data.data.doors
						for (var i = 0; i < res.data.data.doors.length; i++) {
							if (res.data.data.doors[i].opesType == 0) {
								this.doorId = res.data.data.doors[i].doorId
								break;
							}
						}
					})
				} else if (this.curDoorType == 1) {
					this.$req.get(`/xcx/stationDoor/list/doorType/${1}`,data).then(res => {
						this.zizhu = res.data.data.doors
						if (this.firstshow && res.data.data.doors.length == 0) {
							this.curDoorType == 0
						}
						for (var i = 0; i < res.data.data.doors.length; i++) {
							if (res.data.data.doors[i].opesType == 0) {
								this.doorId = res.data.data.doors[i].doorId
								break;
							}
						}
					})
				} else if (this.curDoorType == 2) {
					
					this.$req.get(`/xcx/stationDoor/list/doorType/${2}`,data).then(res => {
						this.rengong = res.data.data.doors
						this.doorId = res.data.data.doors[0].doorId
						console.log(res)
					})
				}
			},
			// 选择洗车类型
			setType(v) {
				
				this.doorId = ''
				this.curtype = v
				if (v == 1) {
					for (var i = 0; i < this.stationinfo.zdDoors.length; i++) {
						if (this.stationinfo.zdDoors[i].opesType == 0) {
							this.doorId = this.stationinfo.zdDoors[i].doorId
							break;
						}
					}
				} else if (v == 2) {
					for (var i = 0; i < this.stationinfo.zzDoors.length; i++) {
						console.log(this.stationinfo.zzDoors[i].opesType, '====')
						if (this.stationinfo.zzDoors[i].opesType == 0) {
							this.doorId = this.stationinfo.zzDoors[i].doorId
							break;
						}
					}
				}
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			showMap(v) {
				uni.openLocation({
					latitude: Number(this.stationinfo.lat),
					longitude: Number(this.stationinfo.lng),
					name: this.stationinfo.name
				})
			},
			getWallet() {
				this.$req.get('/xcx/userWallet').then(res => {
					if (res.data.data) {
						this.walletinfo = res.data.data
					}
				})
			},
			getBusinessHours(v) {
				switch (v) {
					case 0:
						return '0-24h'
						break;
					default:
						return '8-18h'
						break;
				}
			},
			getDetail() {
				this.$req.get('/xcx/station/', {
					stationId: this.id,
					cityId: uni.getStorageSync('cityId'),
					lng: this.lng,
					lat: this.lat
				}).then(res => {
					res.data.data.listUrl = res.data.data.listUrl.indexOf('url') ? JSON.parse(res.data.data
						.listUrl) : []
					this.stationinfo = res.data.data
					console.log(this.stationinfo)
					this.getDoorType()
				})
			},

			toRecharge() {
				if (!this.isLogin) {
					this.$noLog()
					return false
				}
				uni.navigateTo({
					url: '/pages/coupon/buyCoupon'
				})
			},
			// 普通洗车  人工
			putongxiche(){
				// artificialCarType : 0 轿车，1：suv，2：房车 默认为0
				//memberType: "0"：普通会员，“1”：vip，“2”：svip  在本地读取
				// 默认精洗 1
				let memberType = uni.getStorageSync('userInfo').user.memberType;
				let artificialCarType = this.carArr[this.selectCarType].value;//先选默认的值
				let artificialServiceType  = 0;//默认为精洗 0普洗
				let all = memberType + artificialCarType + artificialServiceType;
				// 筛选
				let money = this.stationinfo.rgFees[all]
				let arr = {}
				// 人工工位名称
				for(let i=0;i<this.rengong.length;i++){
					if(this.rengong[i].doorId == this.doorId){
						arr = this.rengong[i];
						break;
					}
				}
				let json = {
					washOrderAmount:money.price,//订单金额
					artificialCarType:this.carArr[this.selectCarType].value,//车型
					artificialServiceType:'0',//服务类型 0普洗 1精细
					stationId:this.stationinfo.stationId,
					memberType:memberType,//会员类型
					userId:uni.getStorageSync('userInfo').user.userId,
					doorId:this.doorId,
					doorName:arr.doorName,
					artificialServiceTitle:'普洗',
					artificialCarTitle:this.carArr[this.selectCarType].name,//日后要改
				}
				json = JSON.stringify(json)
				// console.log(json)
				this.$tab.navigateTo(`/packageB/confirmdingdan/confirmdingdan?data=${json}`);
			},
			confirmOrder() {
				console.log('11')
				if (!this.isLogin) {
					this.$noLog()
					return false
				}
				if (this.doorId == '') {
					uni.showToast({
						title: '暂无可用工位',
						icon: 'none'
					})
					return
				}
				 else if (this.doorId == '') {
					uni.showToast({
						title: '请选择洗车工位',
						icon: 'none'
					})
					return false
				} else {
					
					if(this.curDoorType == 2){
						// this.$tab.navigateTo('/packageB/confirmdingdan/confirmdingdan');
						this.putongxiche()
						return;
					}
					if (!this.submitflag) {
						this.submitflag = true
						uni.showLoading({
							title: '加载中'
						})
						this.$req.get('/xcx/stationDoor/open/', {
							doorId: this.doorId,
							couponsId: this.couponsId,
							firingTypes: this.firingTypes
						}).then(res => {
							uni.hideLoading()
							this.submitflag = false
							if (res.data.code == 200) {
								uni.showModal({
									title: '洗车开门成功',
									success: () => {
										uni.redirectTo({
											url: '/pages/order/order'
										})
									}
								})
							} else {
								if (res.data.msg == '余额不足请充值') {
									uni.navigateTo({
										url: '/pages/coupon/buyCoupon?doorId=' + this.doorId
									})
								} else {
									uni.showModal({
										title: res.data.msg
									})
								}
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
	}

	.swiper-box {
		height: 566rpx;
		width: 100%;

		image {
			width: 100%;
			height: 566rpx;
		}

		.swiper-o {
			height: 566rpx;
			width: 100%;
			position: relative;

			.img-mask {
				top: 0;
				left: 0;
				z-index: 2;
				position: absolute;
				height: 566rpx;
				width: 100%;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2))
			}
		}
	}





	.jifen-box {
		font-size: 24rpx;
		color: #fff;
		background: #BD3124;
		height: 40rpx;
		border-radius: 10rpx;
		padding: 0 10rpx;
	}

	.s-address {
		font-size: 24rpx;
		color: #6D6A6B;
	}

	.location-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.store-info {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		padding: 12rpx 0;
	}

	.store-icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.line-box {
		width: 100%;
		height: 20rpx;
		background: #f7f7f7;
	}

	.type-title {
		width: 100%;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
		margin-top: 32rpx;
	}

	.one-type {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx 32rpx;
		width: 100%;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		// margin-top: 16rpx;

		.type-img {
			width: 100rpx;
			height: 100rpx;
		}

		.type-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rpx;
			color: #000000;
		}

		.type-desc {
			width: calc(100% - 140rpx);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;

			text {
				color: #126BC9;
			}
		}

		.top-box {
			padding-bottom: 16rpx;
			border-bottom: #F6F6F6 solid 1px;
		}

		.price-box {
			justify-content: flex-start;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #E56917;
			padding: 16rpx 0;
		}
	}

	.sel-type {
		border: #17698F solid 1px;
	}

	.one-room-zz {
		width: 100%;
		background: #EEEEEE;
		border-radius: 24rpx;
		padding: 20rpx 24rpx;
		margin-top: 24rpx;

		image {
			margin-right: 12rpx;
			width: 32rpx;
			height: 32rpx;
		}

	}

	.status-box {
		width: 56rpx;
		height: 36rpx;
		background: #00DCA9;
		border-radius: 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 20rpx;
		color: #FFFFFF;
		margin-left: 10rpx;
	}

	.room-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;


		.one-room {
			width: 310rpx;
			height: 138rpx;
			background: #EEEEEE;
			border-radius: 24rpx;
			padding: 28rpx 20rpx;
			margin-top: 20rpx;
		}
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 20rpx 32rpx;
		padding-bottom: 40rpx;
		z-index: 9;
		border-top: #f2f5f5 solid 1px;
		width: 100%;
		justify-content: space-between;
	}

	.account-box,
	.pay-btn {
		font-size: 28rpx;
		color: #1E72CA;
		border: #1E72CA solid 1px;
		border-radius: 10rpx;
		width: 250rpx;
		height: 90rpx;
	}

	.pay-btn {
		width: 400rpx;
		background: #6C6C6C;
		color: #fff;
		border: none;
	}

	.confirm-btn {
		background: #1E72CA;
		color: #fff;
	}

	.s-box {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-top: -140rpx;
		z-index: 5;
		position: relative;
		padding: 24rpx;
		box-shadow: 0px 2px 20px 0px #dbdede;

		.s-img {
			width: 134rpx;
			height: 134rpx;
			border-radius: 12rpx;
			margin-right: 24rpx;
		}

		.s-info {
			width: 470rpx;

			.store-name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}

			.s-jf {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 20rpx;
				color: #126BC9;
				padding: 4rpx 8rpx;
				background: rgba(18, 107, 201, 0.1);
				border-radius: 8rpx;
				margin-top: 12rpx;
			}

			.s-addr {
				margin-top: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #72778A;
				width: 300rpx;
			}

			.s-location-box {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 24rpx;
				color: #126BC9;
			}

			.s-location {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.s-type {
			position: absolute;
			top: 0;
			right: 0;
		}

		.s-zz,
		.s-jm,
		.s-zd,
		.s-qj {
			background: #5233C9;
			color: #fff;
			font-size: 24rpx;
			width: 90rpx;
			height: 40rpx;
			border-radius: 0 0 10rpx 10rpx;
			margin-right: 24rpx;
		}

		.s-jm {
			background: #126BC9;
			color: #fff;
		}

		.s-zd {
			background: #EAB300;
			color: #fff;
		}

		.s-qj {
			background: #00DCA9;
			color: #fff;
		}

	}

	.b-box {
		background: #F4F5FA;
		border-radius: 40rpx 40rpx 0px 0px;
		margin-top: -150rpx;
		position: relative;
		z-index: 2;
		padding: 0 30rpx;
	}

	.info-box {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 10rpx 24rpx;
		margin-top: 20rpx;
		z-index: 2;
	}

	.location-box {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #126BC9;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}
	}

	.distance {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
		margin-top: 12rpx;
	}

	.s-zd-status {
		background: #e2edf7;
		border-radius: 8rpx;
		margin-right: 16rpx;

		.s-zd-status-title {
			background: #126BC9;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 20rpx;
			color: #FFFFFF;
			padding: 4rpx 8rpx;
			border-radius: 8rpx;
		}

		.s-zd-status-detail {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #126BC9;
			padding: 4rpx 8rpx;
		}
	}

	.zz-status {
		background: #dffaf5;
	}

	.t-box {
		margin-top: 16rpx;
		padding-top: 16rpx;
		border-top: #F6F6F6 solid 1px;
	}

	.info-content {
		background: #FFFFFF;
		border-radius: 40rpx;
		margin-top: 190rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
		border: 2rpx solid #FFFFFF;
	}

	.one-x-type {
		background: #F4F5FA;
		height: 40rpx;
		width: 33.3%;
		font-family: PingFang SC, PingFang SC;
		font-size: 28rpx;
		color: #72778A;
		position: relative;
		height: 120rpx;
	}

	.one-x-type-s {
		background: #fff;
	}

	.s-tag {
		width: 56rpx;
		height: 34rpx;
		background: #fff;
		border-radius: 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 20rpx;
		color: #72778A;
		position: absolute;
		top: 0;
		right: 20rpx;
	}

	.s-tag-s {
		background: #00DCA9;
		color: #fff;
	}

	.one-x-type-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #126BC9;
	}

	.one-x-type-line {
		width: 48rpx;
		height: 8rpx;
		background: #126BC9;
		border-radius: 12rpx;
	}

	.zz-index {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 50rpx;
		color: #000000;
		width: 50rpx;
		height: 50rpx;
		border-radius: 100rpx;
		border: #000000 solid 1px;
	}

	.zz-name {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.zz-desc {
		margin-top: 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.v-box {
		.v-img {
			width: 136rpx;
			height: 54rpx;
			margin-right: 20rpx;
		}

		font-family: PingFang SC,
		PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #000;
		margin-left: 20rpx;
		margin-top: 22rpx;
	}

	.pay-box {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
		margin-top: 24rpx;
	}

	.firingTypes {
		border: 2rpx solid #126BC9;

		.firingTypes-o {
			width: 104rpx;
			height: 50rpx;
			background: #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #126BC9;
		}

		.firingTypes-s {
			background: #126BC9;
			color: #fff;
		}

		.reservation-o {
			color: #EAB300;
		}

		.reservation-s {
			background: #EAB300;
			color: #fff;
		}
	}

	.firingTypes-d {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #212121;
		margin-top: 20rpx;
		width: 100%;
	}
	.selectCarType_title{
		
		span{
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}
	}
	.selectCarType_two{
		flex-wrap: wrap;
		justify-content: flex-start;
		.one1{
			width: 200rpx;
			height: 80rpx;
			background: #126BC9;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			span{
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.one{
			width: 200rpx;
			height: 80rpx;
			background: #EEEEEE;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			span{
				font-weight: 400;
				font-size: 28rpx;
				color: #72778A;
			}
		}
	}
</style>